<script lang='ts' setup>
import { LoginType } from '@/models/@types';
import { commonService } from '@/services/common.service';
import { userService } from '@/services/user.service';
import { Message } from "@arco-design/web-vue";
import { ref } from 'vue';

const emits = defineEmits(['close'])

const phone = ref("");
const code = ref("");
const password = ref("");
const rePassword = ref("");

function login(): void {
  if (!password.value) {
    Message.error("请先输入密码"); return;
  }
  const regex = /^(?=.*\d)(?=.*[a-zA-Z!@#$%^&*()_+?])[a-zA-Z0-9!@#$%^&*()_+?]{6,20}$/;
  if (!regex.test(password.value)) {
    Message.error("请输入6-20位数字+字母或符号组合"); return;
  }
  if (password.value !== rePassword.value) {
    Message.error("两次输入的密码不一致"); return;
  }
  commonService.verify(phone.value, code.value).then(res => {
    userService.register(res, password.value).then(() => emits('close'));
  })
}


const isSend = ref(false);
const countdown = ref(0);
let timer: NodeJS.Timer;
function onSendVerify(): void {
  isSend.value = true;
  commonService.send(phone.value).then(() => {
    isSend.value = false;
    countdown.value = 60;
    timer = setInterval(() => {
      if (countdown.value > 0) {
        countdown.value--
      } else {
        clearInterval(timer);
      }
    }, 1000)
  }).catch(() => {
    countdown.value = 0;
    isSend.value = false;
  })
}

</script>
<template>
  <div class="login">
    <div class="title flex"><span class="text flex">注册账号</span></div>
    <div class="cell flex">
      <a-dropdown>
        <a-button style="height: 50px;min-width: 80px;"> + 86
          <template #suffix> <t-icon name="chevron-down" size="16" /></template>
        </a-button>
        <template #content>
          <a-doption>+ 86</a-doption>
        </template>
      </a-dropdown>
      <input type="text" placeholder="请输入手机号码" v-model="phone">
    </div>
    <div class="flex">
      <div class="cell flex">
        <input type="text" placeholder="请输入验证码" v-model="code">
      </div>
      <div class="cell" style="width: 170px;margin-left: 20px;" @click="onSendVerify">
        <a-button class="get-btn" theme="default" variant="text" :loading="isSend" :disabled="!!countdown">
          {{ countdown > 0 ? countdown + '秒' : '获取验证码' }}
        </a-button>
      </div>
    </div>
    <div class="cell flex">
      <input type="password" placeholder="请输入6-20位数字+字母或符号组合" v-model="password">
    </div>
    <div class="cell flex">
      <input type="password" placeholder="请再次输入密码" v-model="rePassword">
    </div>
    <button class="cell btn" @click="login">注册</button>
  </div>
</template>
<style lang='scss' scoped>
.login {
  width: 100%;
  background: var(--color-bg-1);
  padding: 0 50px;
  justify-content: space-between;
}

.title {
  width: 100%;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 45px;
  justify-content: center;

  .text {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-neutral-10);
    line-height: 33px;
    letter-spacing: 2px;
  }

  .close {
    cursor: pointer;
    font-weight: 600;
    font-size: 25px;
  }
}


.cell {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--color-neutral-4);
  margin-bottom: 20px;
  overflow: hidden;
  justify-content: space-between;

  .select {
    width: 88px;
    height: 100%;
    font-size: 16px;

    font-weight: 500;
    color: var(--color-neutral-10);
    line-height: 22px;
    letter-spacing: 2px;
    text-align: center;
  }

  input {
    height: 100%;
    flex: 1;
    padding: 15px 20px;
    color: var(--color-neutral-10);
  }

  .get-btn {
    padding: 15px 20px;
    height: 50px;
    width: 100%;
  }
}

.tips {
  border: none;
  border-radius: 0;
  font-size: 16px;

  font-weight: 600;
  color: rgb(var(--arcoblue-6));
  line-height: 22px;
  letter-spacing: 1px;
}

.btn {
  background: rgb(var(--arcoblue-6));
  border-radius: 10px;
  border-color: var(--color-bg-1);
  color: #fff;
  height: 52px;
  cursor: pointer;
  margin-bottom: 0;
  margin-top: 25px;
}
</style> 